<style>
    .niceButton3 {
        background-color: rgb(75, 129, 215);
        border-radius: 12px;
        border: none;
        color: white;
        padding: 0px 20px 50px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;

        height: 40px;
        cursor: pointer;
        margin-left: 20px;
      }
      .niceButton3:hover {
        background-color: #fff;
        color: #1795bb;
        border: 1px solid #ccc;
      }


 .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }
    .layout-header-bar{
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }
    .menu-item span{
        display: inline-block;
        overflow: hidden;
        width: 69px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
        transition: width .2s ease .2s;
    }
    .menu-item i{
        transform: translateX(0px);
        transition: font-size .2s ease, transform .2s ease;
        vertical-align: middle;
        font-size: 16px;
    }
    .collapsed-menu span{
        width: 0px;
        transition: width .2s ease;
    }
    .collapsed-menu i{
        transform: translateX(5px);
        transition: font-size .2s ease .2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 22px;
    }
    .dev-run-preview .dev-run-preview-edit{ display: none }
    .layout-logo{
        width: 110px;
        height: 55px;
        float: left;
        position: relative;
    }
    #title {
        font-size: 35px;
        font-weight: bold;
        float: right;
        color: #76b8fa;
    }
</style>
<template>
    <div class="layout">
        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark">
                    <div class="layout-logo">
                        <a href="/welcome.html">
                        </a>
                    </div>
                    <!-- <div style="float: right;">
                        <MenuItem>
                            <Button type="primary">
                                <a href="/.html">
                                    <span style="font-size: 16px; font-weight: bold; color: #ffff;">登录</span>
                                </a>
                            </Button>
                            &nbsp;&nbsp;
                            <Button type="info">
                                <a href="/welcome.html">
                                    <span style="font-size: 16px; font-weight: bold; color: #ffff;">注册</span>
                                </a>
                            </Button>
                        </MenuItem>
                    </div> -->
                    <div id="title">
                        <span style="font-size: 30px; font-weight: bold; color: #f75200;">数据结构</span>
                        <span style="font-size: 30px; font-weight: bold; color: #76b8fa;">与</span>
                        <span style="font-size: 30px; font-weight: bold; color: #45a0fc ;">算法</span>
                        <span style="font-size: 30px; font-weight: bold; color: #76b8fa;">可视化平台</span>
                        <button class="niceButton3" type="submit" @click="handleExit">退出登录</button>
                    </div>
                </Menu>
            </Header>
            <Layout :style="{padding: '0px 5px 0px'}">
        <Content :style="{padding: '10px 10px 0px', minHeight: '800px', background: '#fff'}">
            <router-view> </router-view>
        </Content>
    </Layout>
        </Layout>
    </div>
</template>

<script>
import { Submenu } from 'view-ui-plus';
export default {
    data() {
        return {
            login:false,
            name:localStorage.getItem("name"),
            isCollapsed: false
        };
    },
    created(){
        this.login=localStorage.getItem('s');
    },
    methods:{
        show_spin(){
            this.$Spin.show();
            setTimeout(() => {
                this.$Spin.hide();
            }, 1500);
        },
        handleExit(){
            localStorage.removeItem("name");
            this.$router.push({ path: '/login' });
        }
    },
    computed: {
        menuitemClasses: function () {
            return [
                "menu-item",
                this.isCollapsed ? "collapsed-menu" : ""
            ];
        }
    },
    components: { Submenu },

}
</script>


    